<template>
	<view class="content">
		<!--签约房屋信息-->
		<view class="content_1">
			<view class="house_view">
				<image class="house_img" :src="goodsInfo.cover_image"></image>
				<view class="house_detail">
					<view class="house_name">{{goodsInfo.goods_name}}</view>
					<view class="house_info">·租期：{{goodsInfo.rentmoney_show}}</view>
					<view class="house_info">·扣租：{{goodsInfo.way_show}}</view>
					<view class="house_money">租金：￥{{goodsInfo.months_money}} /月</view>
					<view class="house_money">押金：¥ {{goodsInfo.rent_money}} /元</view>
					
				</view>
			</view>
		</view>
		<!--支付信息-->
		<view class="content_2">
			<view class="title_2">支付信息</view>
			<view class="integral_view">
				<view class="integral_text">积分抵扣</view>
				<switch color="#00E266" :checked="switchPoint" @change="change_point" ></switch>
			</view>
		</view>
		<!--费用详细-->
		<view class="content_3">
			
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">租金</view>
					<view class="cost_time">（{{goodsInfo.way_show}}）</view>
				</view>
				<view class="cost_money">￥{{goodsInfo.order_price}}元</view>
			</view>
			
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">服务费</view>
					<view class="cost_time">（按房费比例{{tipMoney}}）</view>
				</view>
				<view class="cost_money">￥{{goodsInfo.tip_money}}元</view>
			</view>
			<!-- 显示积分信息 -->
			<block v-if="switchPoint">
				<view class="detail_money">
					<view class="costdetail_box">
						<view class="cost_name">抵扣积分</view>
						<view class="cost_time"></view>
					</view>
					<view class="cost_money" style="color: #FE4E2C;">{{use_point}}</view>
				</view>
				
				<view class="detail_money">
					<view class="costdetail_box">
						<view class="cost_name">抵扣金额</view>
						<view class="cost_time"></view>
					</view>
					<view class="cost_money" style="color: #FE4E2C;">-￥{{point_money}}元</view>
				</view>
				
				<view class="detail_money">
					<view class="costdetail_box">
						<view class="cost_name">优惠金额</view>
						<view class="cost_time"></view>
					</view>
					<view class="cost_money" style="color: #FE4E2C;">-￥{{point_money}}元</view>
				</view>
			</block>
		</view>
		<!--底部提交-->
		<view class="content_5">
			<view class="total_view">
				<image class="total_icon" src="../../../../static/index/detail/pay/house_pay.svg"></image>
				<view class="total_money">
					<view class="pay_money">￥{{totalMoney}}</view>
					<view class="count_money">已优惠￥{{point_money}}</view>
					<!-- <view class="pay_money" v-else>￥{{goodsInfo.order_price-goodsInfo.discount_price.point_money}}</view> -->
					<!-- <view class="count_money" v-if="switchPoint">已优惠{{goodsInfo.discount_price.point_money}}</view> -->
				</view>
				<view class="service_money">含服务费￥{{goodsInfo.tip_money}}</view>
			</view>
			<view class="submit" @click="toPay">去支付</view>
		</view>
	</view>
</template>

<script>
	import {Request} from '../../../../utils/request.js';	//导入接口请求文件
	import Config from '../../../../utils/config.js';		// 导入配置文件
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				goodsInfo: {},
				switchPoint: false,		//	积分按钮开关
				tipMoney: Config.service.tipMoney,	// 服务费显示
				district_money: parseFloat('0.00').toFixed(2),			//  优惠价格显示
				totalMoney: parseFloat('0.00').toFixed(2),				//  商品总价
				use_point: parseFloat('0.00').toFixed(2),				//  积分抵扣个数
				point_money: parseFloat('0.00').toFixed(2),				//  抵扣积分金额
			}
		},
		methods: {
			change_point: function(e){			//	监听积分按钮
				if(!this.switchPoint){
					this.switchPoint = !this.switchPoint;
					new Request().showToast('暂无积分可使用','none',()=>{
						setTimeout(() => {
							this.$nextTick(()=>{
								this.switchPoint = false;
							});
						}, 1500);
					});
					return;
				}
				if(e.detail.value == false){
					this.district_money = parseFloat('0.00').toFixed(2);					// 优惠价格
					let totleMoney = parseFloat(this.totalMoney) + parseFloat(this.orderInfo.discount_price.point_money);
					this.totalMoney = parseFloat(totleMoney).toFixed(2);
					this.use_point = parseFloat('0.00').toFixed(2);				//  抵扣积分数
					this.point_money = parseFloat('0.00').toFixed(2);			//  抵扣金额
				}
				if(e.detail.value == true){
					this.district_money = parseFloat(this.orderInfo.discount_price.district_money).toFixed(2);		// 优惠价格
					let totleMoney = parseFloat(this.totalMoney) - parseFloat(this.orderInfo.discount_price.point_money);
					this.totalMoney = parseFloat(totleMoney).toFixed(2);
					this.use_point = this.orderInfo.discount_price.use_point;	//  抵扣积分数
					this.point_money = parseFloat(this.orderInfo.discount_price.point_money).toFixed(2);	//  抵扣金额
				}
				this.switchPointStatus = e.detail.value;
			},
			toPay: function() {
				let pointMoney = this.switchPointStatus?this.goodsInfo.discount_price.point_money:0;
				// 原 家具支付接口 地址：goods/pay/PayGoodsTenancy/PayOrder
				// 现 家具支付接口 地址：payment/PayGoodsRentMoney/PayOrder
				let url = 'payment/PayGoodsRentMoney/PayOrder';
				new Request(url).request(
					()=>{
						return 'POST'
					},
					()=>{
						return {
							openid: app.globalData.openid,
							userid: app.globalData.userid,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
							order_id: this.order_id,
							point_money: pointMoney
						}
					},
					(res)=>{
						if(res.data.code == 0){
							new Request().showToast(res.data.msg);
							return;
						}
						let that = this;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp.toString(),
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.sign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								new Request().showToast('支付成功');
								uni.redirectTo({
								    url: '/pages/mine/minegoods'
								});
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								new Request().showToast('已取消支付');
							}
						});
						
					}
				);
			}
		},
		onLoad(option) {
			this.order_id = option.order_id;
			//application/api/controller/renthouse/goods/Tenancy.php
			new Request('goods/Tenancy/getPayDetail').request(
				()=>{
					return 'POST'
				},
				()=>{
					return {
						openid: app.globalData.openid,
						userid: app.globalData.userid,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project,
						order_id: this.order_id,
					}
				},
				(res)=>{
					if(res.data.code == 1){
						let ResponsePay = res.data.data;		//	详情列表
						this.goodsInfo = res.data.data;			//	详情列表
						this.orderInfo = res.data.data;			//	详情列表
						this['goodsInfo']['order_price'] 		= parseFloat(this.goodsInfo.order_price).toFixed(2);
						this['goodsInfo']['tip_money'] 	 		= parseFloat(this['goodsInfo']['tip_money']).toFixed(2);		//	服务费
						this['goodsInfo']['total_money'] 	 	= parseFloat(this['goodsInfo']['total_money']).toFixed(2);		//	总金额
						ResponsePay['discount_price']['district_money']	= parseFloat(ResponsePay['discount_price']['district_money']).toFixed(2);	// 已优惠价格
						this.district_money = ResponsePay.discount_price.district_money;	// 优惠价格显示
						this['goodsInfo']['discount_price']['point_money']	= parseFloat(this['goodsInfo']['discount_price']['point_money']).toFixed(2);	// 积分抵扣多少元
						this.switchPoint = this.goodsInfo['discount_price']['is_point_money'] == 1 ? true : false;
						this.totalMoney = parseFloat(ResponsePay.total_money).toFixed(2);	// 订单总价
						this.switchPointStatus = ResponsePay.discount_price.is_point_money == 1 ? true : false;
						
						this.use_point = ResponsePay.discount_price.use_point;								//  抵扣积分数
						this.point_money = parseFloat(ResponsePay.discount_price.point_money).toFixed(2);	//  积分抵扣金额
					}
				}
			);
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		房源详细样式
	*/
	.content_1 {}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		width: 400upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	/*
		支付信息样式
	*/
	.content_2 {
		height: 88upx;
		background-color: #B3E9DC;
		display: flex;
		align-items: center;
		padding-left: 30upx;
	}

	.title_2 {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #FFFFFF;
		margin-right: 50upx;
		white-space: nowrap;
	}

	.integral_view {
		height: 42upx;
		width: 430upx;
		background-color: #FFFFFF;
		border-top-left-radius: 30upx;
		border-bottom-left-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25upx 65upx;
	}

	.integral_text {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #666666;
	}

	/*
		费用详细样式
	*/
	.content_3 {
		/* height: 340upx; */
		margin: 0 15upx;
		border-radius: 26upx;
		background-color: #FFFFFF;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40upx;
	}

	.detail_money {
		width: 100%;
		height: 38upx;
		line-height: 38upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0;
	}

	.costdetail_box {
		height: 38upx;
		font-size: 28upx;
		display: flex;
		align-items: baseline;
		color: #333333;
	}

	.cost_name {
		margin-right: 10upx;
	}

	.cost_time {
		font-size: 18upx;
		color: #999999;
	}

	.cost_money {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #999999;
	}

	/*
		优惠券样式
	*/
	.content_4 {
		height: 120upx;
		margin-top: 40upx;
	}

	.coupon_view {
		height: 120upx;
		margin: 0 15upx;
		border-radius: 26upx;
		background-color: #FFFFFF;
		padding: 0upx 70upx;
		display: flex;
		align-items: center;
	}

	.coupon_icon {
		height: 28upx;
		width: 28upx;
		border-radius: 28upx;
		border: 5upx solid #999999;
		margin-right: 35upx;
		box-sizing: border-box;
	}

	.coupon_icon_active {
		height: 28upx;
		width: 28upx;
		border-radius: 28upx;
		border: 10upx solid #519DFF;
		margin-right: 35upx;
		box-sizing: border-box;
	}

	.coupon_name {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #999999;
	}

	.coupon_name_active {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #519dff;
	}

	/*
		底部提交样式
	*/
	.content_5 {
		position: fixed;
		z-index: 999;
		height: 100upx;
		width: 734upx;
		background-color: #49453A;
		bottom: 0upx;
		left: 0upx;
		padding-left: 20upx;
	}

	.total_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.total_icon {
		height: 92upx;
		width: 92upx;

	}

	.total_money {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 20upx;
		margin-left: 20upx;
	}

	.pay_money {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.count_money {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
	}
	
	.service_money{
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		margin-top: -35upx;
	}

	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}
	.service_money{
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		margin-top: -35upx;
	}
	
</style>
